<script>

import {getCollege, getDelete, getEdit, getTableData} from "@/utils/class";
import AddClass from "@/components/Psychological/class/addClass.vue";
import ExportClass from "@/components/Psychological/class/exportClass.vue";
import {getTeacher} from "@/utils/class/counselor";

export default {
  name: "classManagement",
  components: {ExportClass, AddClass},
  data() {
    return {
      total: 0,
      querydel: {
        id: ''
      },
      //输入框
      ruleForm: {
        name: '',
        region: '',
      },
      //表格数据
      tableData: [],
      //学院名称渲染
      collegeId: [],
      id: "",
      //数组去重得到新数组
      //newList: [],
      //班级名称
      nameAll: [],
      nameList: [],
      newNameList: [],
      //搜索
      queryList: {
        pageNum: 1,
        pageSize: 9999,
        deptId: '',
        name: ''
      },

      //分页参数
      query: {
        pageNum: 1,
        pageSize: 5,
        deptId: '',
        name: ''
      },
      pagination: {
        defaultPageSize: 5,
        current: 1,
      },
      // queryAll: {
      //   pageNum: 1,
      //   pageSize: 1000,
      //   deptId: '',
      //   name: ''
      // },

      form: {
        name: '',
        region: '',
        teacher: '',
        //编辑
        collegeName: '',
        className: '',
        teacherName: ''
      },
      //编辑
      editQuery: {
        name: '',
        userId: '',
        deptId: '',
        id: ''
      },

      dialogVisible: false,
      formLabelWidth: '80px',
      collegeList: [],
      teacherList: [],
      //接口参数
      date: {
        name: '',
        deptId: '',
        userId: '',
      },
      delId: ''
    }

  },
  methods: {
    changeId(val) {
      this.id = val
      // console.log(val)
    },
    //重置方法
    reset() {
      this.ruleForm.name = ''
      this.ruleForm.region = ''
      getTableData({pageSize: 5}).then(res => {
        this.tableData = res.rows
      })
      this.$message.success('已重置')
    },
    //编辑
    // handleClick(row) {
    //   console.log(row);
    // },
    //分页
    handleCurrentChange(val) {
      this.query.pageNum = val
      getTableData(this.query).then(res => {
        //console.log(res)
        this.tableData = res.rows
      })
    },
    //搜索
    search() {
      this.queryList.name = this.ruleForm.name
      this.queryList.deptId = this.id
      getTableData(this.queryList).then(res => {
        this.tableData = res.rows
      })
      this.$message.success('已搜索')
    },
    //编辑
    // 添加 ：学院、老师
    changeCollege(val) {
      //console.log(val)
      this.date.deptId = val
    },
    changeTeacher(val) {
      //console.log(val)
      this.date.userId = val
    },
    //编辑获取行
    edit(row) {
      this.dialogVisible = true
      // console.log(row)
      this.editQuery.userId = row.userId
      this.editQuery.id = row.id
      this.editQuery.deptId = row.deptId
      this.form.collegeName = row.college
      this.form.className = row.name
      this.form.teacherName = row.userName
    },
    //删除
    deleteBtn(item) {
      // console.log(item)
      this.querydel = item.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDelete([this.querydel]).then(res => {
          // console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTableDataList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑完保存
    submit() {
      this.dialogVisible = false
      this.editQuery.name = this.form.className
      getEdit(this.editQuery).then(res => {
        // console.log(res)
        this.getTableDataList()
        this.$message.success('编辑成功')
      })

    },
    //表格渲染封装
    getTableDataList() {
      getTableData(this.query).then(res => {
        //console.log(res)
        this.total = Number(res.total)
        this.tableData = res.rows
      })
    }
  },
  created() {
    //表格渲染
    this.getTableDataList()
    //学院名称渲染
    getCollege().then(res => {
      // console.log(res)
      this.collegeId = res.data
    })

    //学院名称
    // getTableData(this.queryAll).then(res => {
    //   console.log(res)
    //   this.tableDataAll = res.rows
    //   this.tableDataAll.forEach(item => {
    //     this.collegeList[0].push(item.college)
    //     this.collegeList[1].push(item.deptId)
    //     this.newList = [[...new Set(this.collegeList[0])], [...new Set(this.collegeList[1])]]
    //     console.log(this.newList)
    //   })
    //   console.log(this.newList)
    // })

    //学校名称
    getCollege().then(res => {
      //console.log(res)
      this.collegeList = res.data
    })
    //负责老师
    getTeacher().then(res => {
      //console.log(res)
      this.teacherList = res.rows
    })

  },
}
</script>

<template>
  <div>
    <div class="app">
      <div class="app-main">
        <div style="padding: 40px;">
          <div class="app-main-header">
            <!--            //学院、姓名、按钮-->
            <el-form ref="ruleForm" :data1="collegeId" :inline="true" :model="ruleForm"
                     class="demo-ruleForm" label-width="100px">
              <el-form-item label="学院名称" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请输入学院名称" @change="changeId(ruleForm.region)">
                  <el-option v-for="item in collegeId" :label="item.deptName" :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="班级名称">
                <el-input v-model="ruleForm.name"
                          placeholder="请输入班级名称"></el-input>
              </el-form-item>
              <div class="btnAll" style="float: right">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary"
                           @click="search">搜索
                </el-button>
              </div>
            </el-form>
            <!--            //添加、导入按钮-->
            <div class="btnAll" style="margin-left: 35px">
              <div style="width: 80px; float: left">
                <add-class></add-class>
              </div>
              <div style="width: 80px; float:left;">
                <export-class></export-class>
              </div>
            </div>
            <!--            //表格内容-->
            <div class="tableBox" style="margin-top:60px;margin-left: 35px;">
              <el-table
                ref="multipleTable"
                :data="tableData" border
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="110">
                </el-table-column>
                <el-table-column
                  label="学院名称"
                  prop="college"
                  width="110">
                </el-table-column>
                <el-table-column
                  label="班级名称"
                  prop="name"
                  width="266">
                </el-table-column>
                <el-table-column
                  label="负责老师"
                  prop="userName"
                  width="266">
                </el-table-column>

                <el-table-column
                  label="创建时间"
                  prop="updateTime"
                >
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="200"
                >
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="small" type="text" @click="deleteBtn(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--              分页按钮-->
              <div class="pag-btn" style="margin-top: 30px;float: right">
                <el-pagination
                  :page-size="5"
                  :pagination="pagination"
                  :total="total"
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
              <!--              编辑按钮-->
              <div class="edit-btn">
                <el-dialog
                  :visible.sync="dialogVisible"
                  title="提示"
                  width="30%">
                  <el-form :model="form">
                    <el-form-item :label-width="formLabelWidth" label="学院名称">
                      <el-select v-model="form.collegeName" clearable placeholder="请输入学院名称"
                                 style="width: 280px" @change="changeCollege(form.collegeName)">
                        <el-option v-for="item in this.collegeList" :label="item.deptName"
                                   :value="item.deptId"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="班级名称">
                      <el-input v-model="form.className" autocomplete="off" clearable
                                maxlength="20" placeholder="请输入班级名称" show-word-limit
                                style="width: 280px"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="负责老师">
                      <el-select v-model="form.teacherName" clearable placeholder="请选择负责老师"
                                 style="width: 280px" @change="changeTeacher(form.teacherName)">
                        <el-option v-for="item in this.teacherList" :label="item.nickName"
                                   :value="item.userId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="submit">保 存</el-button></span>
                </el-dialog>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
